<template>
	<!-- 拼单各自付款 -->
	<view class="cont_bo">
		<!-- <pTit /> -->
		<view class="invitation">
			<view class="in_tits">
				<text v-if="spoStates=='0'">等待拼单</text>
				<text v-if="spoStates=='1'">抱歉！您的位置无法参与配送</text>
			</view>
			<view class="in_tooltips">
				 <view class="">
				 	 <text class="fcon-tixing" style="font-size: 32rpx; color:#FF9700;"></text>
				 </view>
				 <view class="tooltips_text">
				 	拼单小于1人，将全额退款，拼单成功后送餐，请及时关注您的拼单状态
				 </view>
			</view>
			<view class="in_body">
				<view class="isNull">
					<text v-if="spoStates=='0'">微信好友一起点餐 共享优惠吧</text>
					<text v-if="spoStates=='1'">您可以试试邀请其他好友 共享优惠吧</text>
				</view>
				<view class="aut_list flex justify-center align-center">
					<view class="au_item" v-for="(item,index) in orderInfo" :key="index" v-show="isOrder">
						<image :src="item.userAut" class="au_ims" v-if="item.userAut"></image>
						<view v-else class="isEnd flex justify-center align-center">?</view>
						<!-- <view class="sendUser" v-if="item.userId==loginUserIds&&isOrder">发起人</view> -->
					</view>
				</view>
				<view class="yq_btn flex justify-center align-center"><text class="fcon-new"
						style="margin-right:10rpx;font-weight: 400;"></text>邀请好友</view>
			</view>
		</view>

		<view class="list_tit">拼单列表</view>
		<scroll-view class="list_box" scroll-y scroll-with-animation>
			<view class="box_item" v-for="(item,index) in orderInfo" :key="index" v-show="item.userId!='-1'">
				<view class="item_user flex justify-between align-center">
					<view class="u_inf flex">
						<view class="u_img">
							<image :src="item.userAut" class="u_is"></image>
						</view>
						<view class="u_na">{{item.usaerName}}</view>
						<view class="mySelf" v-if="item.userId==loginUserIds">我</view>
					</view>
					<view class="u_action" v-if="item.userId==loginUserIds">
						<view class="flex">
							<view class="btn_clear" @click="canelSpo">退出拼单</view>
							<view class="btn_edit" @click="editCar">修改商品</view>
						</view>
					</view>
					<view class="u_act_unpay" v-else>未付款</view>
				</view>
				<view class="shop_list" v-for="(it,ind) in item.carList" key="ind">
					<view class="shop_base_info">
						<view class="ba_name">{{it.shopName}} </view>
						<view class="ba_num">X{{it.shopNum}}</view>
						<view class="ba_pri"><text style="font-size: 20rpx;margin-right: 6rpx;">¥</text>{{it.shopPrice}}
						</view>
					</view>
					<view class="base_kcal">
						<text class="kc_spe">{{it.shopSpe}}</text>
						<text class="cuIcon-title" style="color: #4F585E;"></text>
						<text class="kc_k">{{it.kacl}}Kcal</text>
					</view>
				</view>
				<view class="pack_cost">
					<view class="pc_text">分摊小计<text class="iconss" @click="onenRuls">?</text></view>
					<view class="pc_texts" style="color: #FC4C40;font-weight: 700;"><text
							style="font-size: 20rpx;margin-right: 6rpx;">¥</text>{{item.shareing}}</view>
				</view>
				<view class="de_tial" v-if="item.userId==loginUserIds">
					以结算时订单分摊后的金额为准
				</view>
			</view>
		</scroll-view>
		<view class="other_info" v-for="(item,index) in otherFee" :key="index">
			<view class="ot_text">{{item.name}}</view>
			<view class="ot_val">
				<text class="red_val">¥{{item.reducet}}</text>
				<text
					:style="{color:item.name=='拼单总计'?'#FC4C40':'',fontSize:item.name=='拼单总计'?'36rpx':''}">¥{{item.cost}}</text>
			</view>
		</view>
		<view class="bottom_tips">
			<!-- 您的账单信息将被同步至微信用于群收款<text class="iconss">?</text> -->
		</view>
		<rulModel ref="rulModels" />
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { mnavTo } from '@/utils/helper';
	import rulModel from '../spoDetial/rulesMod.vue'
	const imgBaseUrl = ref("https://cdn-static.yekjx.com/food/images/")
	const loginUserIds = ref("100001")
	const isOrder = ref(true)
	const rulModels = ref()
	const spoStates = ref('0') //'0'拼单成功，'1'拼单失败
	const otherFee = ref([
		{
			name: "包装费",
			cost: "1",
			reducet: "2.8"
		}, {
			name: "配送费",
			cost: "1",
			reducet: "2.8"
		}, {
			name: "拼单总计",
			cost: "34.9",
			reducet: "57.9"
		}
	])
	const orderInfo = ref([
		{
			userId: "100001",
			userAut: imgBaseUrl.value + "ushead.png",//用户头像
			usaerName: "Jynn",//用户名
			carList: [
				{
					shopName: "山茶油黄焖香剪黄鸭",//商品名称
					shopNum: 1,//商品数量
					shopPrice: "18.0",//商品价格
					shopSpe: "1条/份",//商品规格
					kacl: "111",//商品卡路里
				}, {
					shopName: "铁板烤鸭",//商品名称
					shopNum: 1,//商品数量
					shopPrice: "18.0",//商品价格
					shopSpe: "1只/份",//商品规格
					kacl: "500",//商品卡路里
				}
			],
			packing: "1",//包装费,
			shareing: "2",//分摊小计
		}, {
			userId: "100002",
			userAut: imgBaseUrl.value + "car_img01.png",//用户头像
			usaerName: "fLQ173028328",//用户名
			carList: [
				{
					shopName: "手撕鸡",//商品名称
					shopNum: 1,//商品数量
					shopPrice: "17.0",//商品价格
					shopSpe: "小小份(约100g)",//商品规格
					kacl: "178",//商品卡路里
				}
			],
			packing: "1",//包装费,
			shareing: "1",//分摊小计
		}, {
			userId: "-1",
			userAut: "",
			usaerName: "",//用户名
			carList: [],
			packing: "1",//包装费,
			shareing: "1",//分摊小计
		}
	])
	const onenRuls = () => {
		rulModels.value.open()
	}
	onLoad(() => {
		let result : any = orderInfo.value.find(order => order.userId === loginUserIds.value)
		if (result.carList.length == 0) {
			isOrder.value = false
		} else {
			isOrder.value = true
		}
	})
	const canelSpo = () => {
		uni.removeStorageSync('isSpo')
		uni.switchTab({
			url: '/pages/index/menu/menu'
		});
	}
	const editCar = ()=>{
		uni.switchTab({url: '/pages/index/menu/menu'})
	}
</script>

<style lang="scss" scoped>
	.invitation {
		width: 100vw;
		height: 702rpx;
		background: linear-gradient(180deg, #BEFDE6 0%, #EFFFEB 51%, #FAFDFE 100%);
		padding: 30rpx 0rpx 10rpx 0rpx;
 .in_tooltips{
		width: 694rpx;
		height: 126rpx;
		border-radius: 10px;
		background: #FFF4E4;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0rpx 0rpx 20rpx;
		.tooltips_text{
			color: #FF9700;
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-weight: 400;
			margin-left:20rpx;
			margin-top: -5rpx;
		}
	}
		.in_tits {
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 40rpx;
			font-weight: 400;
			text-align: center;
		}
 
		.in_body {
			width: 694rpx;
			height: 416rpx;
			border-radius: 20rpx 20rpx 0px 0px;
			background: #FFF;
			margin: 20rpx auto;
			padding: 30rpx 0rpx 10rpx 0rpx;

			.isNull {
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 32rpx;
				font-weight: 400;
				text-align: center;
			}

			.aut_list {
				width: 100%;
				height: 98rpx;
				margin-top: 50rpx;
				padding: 0rpx 20rpx 0rpx 20rpx;

				.au_item {
					width: 97rpx;
					height: 97rpx;
					border-radius: 50%;
					position: relative;

					&:nth-child(n+2) {
						margin-left: 30rpx;
					}

					.sendUser {
						position: absolute;
						bottom: -15rpx;
						left: 0;
						width: 88rpx;
						height: 36rpx;
						border-radius: 34rpx;
						background-color: #FE270B;
						color: #FFF;
						font-family: "Microsoft YaHei UI";
						font-size: 24rpx;
						font-weight: 400;
						text-align: center;
						line-height: 36rpx;
					}

					.au_ims {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}

					.isEnd {
						width: 100%;
						height: 100%;
						border: 2rpx dashed #D9D9D9;
						border-radius: 50%;
						color: rgba(217, 217, 217, 0.60);
						font-family: "Microsoft YaHei UI";
						font-size: 32rpx;
						font-weight: 700;
					}
				}
			}
		}

		.yq_btn {
			width: 578rpx;
			height: 90rpx;
			border-radius: 10rpx;
			background: #53A87F;
			margin: 50rpx auto;
			color: #FFF;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-weight: 700;
		}
	}

	.list_tit {
		color: #666;
		font-family: "Microsoft YaHei UI";
		font-size: 28rpx;
		font-weight: 400;
		margin: 30rpx 20rpx 30rpx 20rpx;
	}

	.list_box {
		width: 100vw;
		// height: calc(100vh - 740rpx);
		border-bottom: 2rpx solid #F8F8F8;

		.box_item {
			width: 100%;
			min-height: 296rpx;
			background-color: #fff;
			padding: 10rpx 0rpx 10rpx 0rpx;

			&:nth-child(n+2) {
				margin-top: 15rpx;
			}

			.item_user {
				width: 100%;
				height: 90rpx;
				border-bottom: 2rpx solid #F8F8F8;
				padding: 0rpx 30rpx 0rpx 20rpx;

				.u_inf {
					.u_img {
						width: 60rpx;
						height: 60rpx;

						.u_is {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.u_na {
						color: #333;
						font-family: "Microsoft YaHei UI";
						font-size: 28rpx;
						font-weight: 400;
						margin: 11rpx 0rpx 0rpx 20rpx;
					}

					.mySelf {
						color: #999;
						min-width: 42rpx;
						height: 42rpx;
						border-radius: 8rpx;
						border: 2rpx solid #999;
						text-align: center;
						line-height: 38rpx;
						margin: 11rpx 0rpx 0rpx 10rpx;
					}
				}

				.u_action {
					.btn_clear {
						width: 152rpx;
						height: 52rpx;
						border: 2rpx solid #999;
						text-align: center;
						line-height: 52rpx;
						border-radius: 10rpx;
						color: #999;
						font-family: "Microsoft YaHei UI";
						font-size: 28rpx;
						font-weight: 400;
						margin-right: 20rpx;
					}

					.btn_edit {
						width: 152rpx;
						height: 52rpx;
						text-align: center;
						line-height: 52rpx;
						border-radius: 10rpx;
						color: #999;
						font-family: "Microsoft YaHei UI";
						font-size: 28rpx;
						font-weight: 400;
						border: 2rpx solid #999;
					}
				}

				.u_act_unpay {
					color: #53A87F;
					font-family: "Microsoft YaHei UI";
					font-size: 36rpx;
					font-weight: 700;
				}

			}
		}

		.shop_list {
			width: 100%;
			min-height: 20rpx;
			// border-bottom:1rpx solid #F8F8F8;
			padding: 15rpx 30rpx 10rpx 93rpx;

			.shop_base_info {
				display: flex;
				justify-content: space-between;
				margin-top: 6rpx;

				.ba_num {
					color: #666;
					font-family: "Microsoft YaHei UI";
					font-size: 28rpx;
					font-weight: 400;
					margin-top: 7rpx;
				}

				.ba_name {
					color: #333;
					font-family: "Microsoft YaHei UI";
					font-size: 32rpx;
					font-weight: 400;
					min-width: 440rpx;
				}

				.ba_pri {
					color: #333;
					font-family: "Microsoft YaHei UI";
					font-size: 36rpx;
					font-weight: 700;
					min-width: 120rpx;
					text-align: right;
				}
			}

			.base_kcal {
				margin-top: 6rpx;

				.kc_spe {
					color: #666;
					font-family: "Microsoft YaHei UI";
					font-size: 28rpx;
					font-weight: 400;
				}

				.kc_k {
					color: #9B9B9B;
					font-family: "Microsoft YaHei UI";
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}

		.pack_cost {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 10rpx 30rpx 0rpx 93rpx;

			.pc_text {
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 32rpx;
				font-weight: 700;

				.iconss {
					display: inline-block;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					border: 2rpx solid #E2E2E2;
					background-color: #fff;
					text-align: center;
					line-height: 30rpx;
					font-size: 20rpx;
					color: #E2E2E2;
					margin-left: 10rpx;
				}
			}

			.pc_texts {
				color: #333;
				font-family: "Microsoft YaHei UI";
				font-size: 36rpx;
				font-weight: 700;
			}
		}

		.de_tial {
			color: #999;
			font-family: "Microsoft YaHei UI";
			font-size: 24rpx;
			font-weight: 400;
			padding: 10rpx 0rpx 0rpx 93rpx;
		}
	}

	.other_info {
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 25rpx 10rpx 20rpx;

		.ot_text {
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-weight: 400;
		}

		.ot_val {
			color: #333;
			font-family: "Microsoft YaHei UI";
			font-size: 32rpx;
			font-weight: 400;

			.red_val {
				text-decoration: line-through;
				color: #999;
				font-family: "Microsoft YaHei UI";
				font-size: 24rpx;
				font-weight: 400;
				margin-right: 10rpx;
			}
		}
	}

	.bottom_tips {
		width: 100%;
		padding: 30rpx 0rpx 80rpx 0rpx;
		text-align: center;

		.iconss {
			display: inline-block;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			border: 2rpx solid #E2E2E2;
			text-align: center;
			line-height: 25rpx;
			font-size: 20rpx;
			color: #E2E2E2;
			margin-left: 10rpx;
		}
	}

	.lines_inv {
		color: #AFAFB0;
		margin: -10rpx 20rpx 0rpx 20rpx;
	}
</style>